import React, { PureComponent } from 'react';
import PopupDialog from '../../../components/PopupDialog';
import './style.styl';

const imgs = {
    centos: require('../../../assets/img/cent_os.png'),
    debin: require('../../../assets/img/debin.png'),
    suse: require('../../../assets/img/suse.png'),
    ubuntu: require('../../../assets/img/ubuntu.png'),
    windows: require('../../../assets/img/windows.png')
};
const colors = {
    building: '#ff9a2a',
    idle: '#7fbc39'
};

export default class index extends PureComponent {
    state = {
        popupValue: '',
        visible: false
    };
    popupInputChange(e) {
        this.setState({ popupValue: e.target.value });
    }

    popupVisibleChange = value => {
        this.setState({ visible: value });
    };

    popupHide() {
        this.setState({ visible: false, popupValue: '' });
    }

    async addResource(value, id) {
        if (!value) return;
        await this.props.addResource(value, id);
        this.setState({ popupValue: '' });
        this.popupHide();
    }

    render() {
        const { data, delResource } = this.props;
        const { popupValue, visible } = this.state;
        const PopupDialogContent = id => (
            <div className="input-popup">
                <div className="text">
                    Separate multiple resource name with comms
                </div>
                <input
                    className="form-control"
                    type="text"
                    placeholder="input value"
                    value={popupValue}
                    onChange={this.popupInputChange.bind(this)}
                />
                <div className="btns">
                    <button
                        className="btn add-resource"
                        onClick={this.addResource.bind(this, popupValue, id)}
                        type="button"
                    >
                        Add Resource
                    </button>
                    <button
                        className="btn cancel"
                        type="button"
                        onClick={this.popupHide.bind(this)}
                    >
                        Cancel
                    </button>
                </div>
            </div>
        );
        return (
            <div className="item-list">
                {data.map(item => (
                    <div key={item.id} className="item">
                        <img src={imgs[item.os]} alt="" />
                        <div className="item-main">
                            <div className="item-head">
                                <div className="item-head-name">
                                    <span className="icon icon-desktop" />
                                    <span>{item.name}</span>
                                </div>
                                <span
                                    style={{
                                        backgroundColor: colors[item.status]
                                    }}
                                    className="item-head-status"
                                >
                                    {item.status}
                                </span>
                                <div className="item-ip">
                                    <span className="icon icon-info" />
                                    <span>{item.ip}</span>
                                </div>
                                <div className="item-head-location">
                                    <span className="icon icon-folder" />
                                    <span>{item.location}</span>
                                </div>
                            </div>
                            <div className="item-ctrl">
                                <PopupDialog
                                    visibleChange={this.popupVisibleChange}
                                    visible={visible}
                                    event="click"
                                    content={PopupDialogContent(item.id)}
                                >
                                    <div className="add">
                                        <span className="icon-plus" />
                                    </div>
                                </PopupDialog>
                                {item.resources &&
                                    item.resources.map((re, i) => (
                                        <div key={re} className="resources">
                                            <span>{re}</span>
                                            <span
                                                onClick={delResource.bind(
                                                    this,
                                                    item.id,
                                                    i
                                                )}
                                                className="icon-trash"
                                            />
                                        </div>
                                    ))}
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        );
    }
}
